<template>
  <div>
    <div class="el-form-item el-form-item--small el-form--label-top" v-for="event in events" :key="event">
      <label
        class="el-form-item__label"
        style="padding: 0;width: 60px">{{ event }}：</label>
      <div class="el-form-item__content">
        <el-radio-group
          v-model="showEdit[event]"
          size="default" style="margin-bottom: 5px">
          <el-radio-button :label="false">显示</el-radio-button>
          <el-radio-button :label="true">编辑</el-radio-button>
        </el-radio-group>
        <el-input type="textarea" v-model="this[event]" v-if="!showEdit[event]" clearable />
        <drag-dialog
          title="事件编辑"
          width="60%" 
          v-model="showEdit[event]">
          <code-editor
            :languageSelector="false"
            :themeSelector="false"
            v-model="this[event]" 
            height="400px"
            :editorOption="options" />
        </drag-dialog>
      </div>
    </div>

    <!-- <div class="el-form-item el-form-item--small el-form--label-top">
      <label
        class="el-form-item__label"
        style="padding: 0;">click：</label>
      <div class="el-form-item__content">
        <el-radio-group
          v-model="showEdit.click"
          size="default" style="margin-bottom: 5px">
          <el-radio-button :label="false">显示</el-radio-button>
          <el-radio-button :label="true">编辑</el-radio-button>
        </el-radio-group>
        <el-input type="textarea" v-model="click" v-if="!showEdit.click" clearable />
        <monaco-editor
          v-model="click" v-if="showEdit.click"
          height="200"
          :keyIndex="`event-click-${data.prop}`"
          :options="options" />
      </div>
    </div>
    <div class="el-form-item el-form-item--small el-form--label-top">
      <label
        class="el-form-item__label"
        style="padding: 0;">focus：</label>
      <div class="el-form-item__content">
        <el-radio-group
          v-model="showEdit.focus"
          size="default" style="margin-bottom: 5px">
          <el-radio-button :label="false">显示</el-radio-button>
          <el-radio-button :label="true">编辑</el-radio-button>
        </el-radio-group>
        <el-input type="textarea" v-model="focus" v-if="!showEdit.focus" clearable />
        <monaco-editor
          v-model="focus" v-if="showEdit.focus"
          height="200"
          :keyIndex="`event-focus-${data.prop}`"
          :options="options" />
      </div>
    </div>
    <div class="el-form-item el-form-item--small el-form--label-top">
      <label
        class="el-form-item__label"
        style="padding: 0;">blur：</label>
      <div class="el-form-item__content">
        <el-radio-group
          v-model="showEdit.blur"
          size="default" style="margin-bottom: 5px">
          <el-radio-button :label="false">显示</el-radio-button>
          <el-radio-button :label="true">编辑</el-radio-button>
        </el-radio-group>
        <el-input type="textarea" v-model="blur" v-if="!showEdit.blur" clearable />
        <monaco-editor
          v-model="blur" v-if="showEdit.blur"
          height="200"
          :keyIndex="`event-blur-${data.prop}`"
          :options="options" />
      </div>
    </div> -->
    <!-- <div class="el-form-item el-form-item--small el-form--label-top">
      <label
        class="el-form-item__label"
        style="padding: 0;">control：</label>
      <div class="el-form-item__content">
        <el-radio-group
          v-model="showEdit.control"
          size="default" style="margin-bottom: 5px">
          <el-radio-button :label="false">显示</el-radio-button>
          <el-radio-button :label="true">编辑</el-radio-button>
        </el-radio-group>
        <el-input type="textarea" v-model="control" v-if="!showEdit.control" clearable />
        <monaco-editor
          v-model="control" v-if="showEdit.control"
          height="200"
          :keyIndex="`event-click-${data.prop}`"
          :options="options" />
      </div>
    </div> -->
    <!-- <div class="el-form-item el-form-item--small el-form--label-top">
      <label
        class="el-form-item__label"
        style="padding: 0;">appendClick：</label>
      <div class="el-form-item__content">
        <el-radio-group
          v-model="showEdit.appendClick"
          size="default" style="margin-bottom: 5px">
          <el-radio-button :label="false">显示</el-radio-button>
          <el-radio-button :label="true">编辑</el-radio-button>
        </el-radio-group>
        <el-input type="textarea" v-model="appendClick" v-if="!showEdit.appendClick" clearable />
        <monaco-editor
          v-model="appendClick" v-if="showEdit.appendClick"
          height="200"
          :keyIndex="`event-click-${data.prop}`"
          :options="options" />
      </div>
    </div>
    <div class="el-form-item el-form-item--small el-form--label-top" v-if="data.type === 'upload'">
      <label
        class="el-form-item__label"
        style="padding: 0;">uploadAfter：</label>
      <div class="el-form-item__content">
        <el-radio-group
          v-model="showEdit.uploadAfter"
          size="default" style="margin-bottom: 5px">
          <el-radio-button :label="false">显示</el-radio-button>
          <el-radio-button :label="true">编辑</el-radio-button>
        </el-radio-group>
        <el-input type="textarea" v-model="uploadAfter" v-if="!showEdit.uploadAfter" clearable />
        <monaco-editor
          v-model="uploadAfter" v-if="showEdit.uploadAfter"
          height="200"
          :keyIndex="`event-click-${data.prop}`"
          :options="options" />
      </div>
    </div> -->
  </div>
</template>

<script>
import CodeEditor from '@/components/CodeEditor/src/CodeEditor.vue'

export default {
  name: "ConfigEvent",
  components: { CodeEditor },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      events: ['change', 'click', 'focus', 'blur'],
      showEdit: {
        control:false,
        change: false,
        focus: false,
        click: false,
        blur: false,
        appendClick:false,
        uploadAfter:false
      },
      change: '',
      click: '',
      focus: '',
      blur: '',
      control:'',
      appendClick:'',
      uploadAfter:'',
      options: {
        fullScreen: true,
        minimap: {
          enabled: false,
        },
      },
      localData:{}
    }
  },
  watch: {
    data:{
      handler(newVal){
        this.localData = newVal
      },
      immediate:true
    },
    localData:{
      handler(newVal){
        this.$emit('update:data',newVal)
      },
      deep:true
    },
    'data.prop': {
      handler() {
        const { change, click, focus, blur, control, appendClick, uploadAfter } = this.data
        this.change = change ? change + '' : '({value}) => {\r\n\r\n}'
        this.click = click ? click + '' : '({value}) => {\r\n\r\n}'
        this.focus = focus ? focus + '' : '({value}) => {\r\n\r\n}'
        this.blur = blur ? blur + '' : '({value}) => {\r\n\r\n}'
        // this.$set(this, 'change', change ? change + '' : '({value}) => {\r\n\r\n}')
        // this.$set(this, 'click', click ? click + '' : '({value}) => {\r\n\r\n}')
        // this.$set(this, 'focus', focus ? focus + '' : '({value}) => {\r\n\r\n}')
        // this.$set(this, 'blur', blur ? blur + '' : '({value}) => {\r\n\r\n}')
        // this.$set(this, 'control', control ? control + '' : '(val,form) => {\r\n\r\n}')
        // this.$set(this, 'appendClick', appendClick ? appendClick + '' : '() => {\r\n\r\n}')
        // this.$set(this, 'uploadAfter', uploadAfter ? uploadAfter + '' : `(res, done, loading) => {\r\n\r\n}`)
      },
      immediate: true
    }
  },
  mounted() {
    document.addEventListener('keyup', (e) => {
      // if (e.keyCode == 27) {
      //   debugger
      // }
    })

    this.$nextTick(() => {
      this.events.forEach(e => {
        this.$watch(`${e}`, (val) => {
          try {
            this.localData[e] = typeof val == 'string' ? eval(val) : val
            // this.$set(this.data, e, typeof val == 'string' ? eval(val) : val)
          } catch (err) {
            console.error(e)
          }
        })
      })
    })
  },
  methods:{
    // useDefaultUploadCallback(){
    //   this.$set(this.data, 'uploadAfter', eval(this.uploadAfter))
    // }
  }
}
</script>
